<script setup>
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import dayjs from 'dayjs';
import {
	getProductList,
	addInbound,
	updateInbound,
	getVendorList
} from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
import NP from 'number-precision'
const account = useAccountStore();
const formRef = ref();
const data = ref([]);
const vendorList = ref([]);
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const state = reactive({
	formState: {
		productName: '',
		productType: '',
		inboundDate: dayjs(),
		productCode: '',
		var1: '',
		var2: '',
		var3: '',
		var4: '',
		var5: '',
		price: '',
		total: '',
		totalUseNum: '',
		amount: '',
		flag: '',
		vendor: '',
		remark: '',
		warehouseName: '',
		payFlag: ''
	}
});
const rules = {
	name: [
		{
			required: true,
			message: 'Please input Activity name',
			trigger: 'change'
		},
		{
			min: 3,
			max: 5,
			message: 'Length should be 3 to 5',
			trigger: 'blur'
		}
	],
	region: [
		{
			required: true,
			message: 'Please select Activity zone',
			trigger: 'change'
		}
	],
	date1: [
		{
			required: true,
			message: 'Please pick a date',
			trigger: 'change',
			type: 'object'
		}
	],
	type: [
		{
			type: 'array',
			required: true,
			message: 'Please select at least one activity type',
			trigger: 'change'
		}
	],
	resource: [
		{
			required: true,
			message: 'Please select activity resource',
			trigger: 'change'
		}
	],
	desc: [
		{
			required: true,
			message: 'Please input activity form',
			trigger: 'blur'
		}
	]
};
const router = useRouter();
const route = useRoute();
const getProdcut = () => {
	account.spinning = true;

	getProductList({
		name: '',
		pageNum: 1,
		pageSize: 99999
	})
		.then((res) => {
			data.value = res.list;
			getVendorList({
				pageNum: 1,
				pageSize: 9999
			})
				.then((res) => {
					vendorList.value = res.list;
					account.spinning = false;
				})
				.catch((err) => {
					account.spinning = false;
					message.error(err);
				});
		})
		.catch((err) => {
			account.spinning = false;
			message.error(err);
		});
};
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			if (route['query']?.id) {
				account.spinning = true;

				updateInbound({
					id: route['query']?.id,
					...state.formState,
					inboundDate: dayjs(state.formState.inboundDate).format('YYYY-MM-DD')
				})
					.then((res) => {
						account.spinning = false;

						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			} else {
				account.spinning = true;

				addInbound({
					...state.formState,
					inboundDate: dayjs(state.formState.inboundDate).format('YYYY-MM-DD')
				})
					.then((res) => {
						account.spinning = false;
						formRef.value.resetFields();
						router.back();
					})
					.catch((err) => {
						account.spinning = false;
						message.error(err);
					});
			}
		})
		.catch((error) => {
			account.spinning = false;
			console.log('error', error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	getProdcut();
	if (route['query']?.productName) {
		console.log(route['query']);
		state.formState = {
			...route['query'],
			inboundDate: dayjs(route['query'].inboundDate, 'YYYY-MM-DD')
		};
	}
	console.log(route);
});
const handleProdcutCode = (i) => {
	data.value.forEach((item) => {
		if (item.code === i) {
			state.formState.productName = item.name;
			state.formState.productType = item.type;
			state.formState.productCode = item.code;
			state.formState.var1 = item.var1;
			state.formState.var2 = item.var2;
			state.formState.var3 = item.var3;
			state.formState.var4 = item.var4;
			state.formState.var5 = item.var5;
			state.formState.price = item.price;
			state.formState.totalUseNum = item.total;
		}
	});
};
const changeTotal = () => {
	state.formState.amount = NP.times(state.formState.price, state.formState.total);
};
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑入库信息</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:rules="rules"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item label="产品编码" name="productCode">
				<a-select
					v-model:value="state.formState.productCode"
					@change="handleProdcutCode"
				>
					<a-select-option :key="i.id" v-for="i in data" :value="i.code">{{
						i.code
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item ref="name" label="产品名称" name="productName">
				<a-input v-model:value="state.formState.productName" disabled />
			</a-form-item>
			<a-form-item label="类别" name="productType">
				<a-input v-model:value="state.formState.productType" disabled />
			</a-form-item>
			<a-form-item label="规格型号" name="var1">
				<a-input v-model:value="state.formState.var1" disabled />
			</a-form-item>
			<a-form-item label="单位" name="var2">
				<a-input v-model:value="state.formState.var2" disabled />
			</a-form-item>
			<a-form-item label="日期" name="inboundDate">
				<a-date-picker
					v-model:value="state.formState.inboundDate"
					style="width: 100%"
				/>
			</a-form-item>
			<a-form-item label="单户用量" name="var3">
				<a-input v-model:value="state.formState.var3" disabled />
			</a-form-item>
			<a-form-item label="单层用量" name="var4">
				<a-input v-model:value="state.formState.var4" disabled />
			</a-form-item>
			<a-form-item label="首层用量" name="var5">
				<a-input v-model:value="state.formState.var5" disabled />
			</a-form-item>
			<a-form-item label="单价" name="price">
				<a-input v-model:value="state.formState.price" disabled />
			</a-form-item>
			<a-form-item label="入库数量" name="total">
				<a-input v-model:value="state.formState.total" @change="changeTotal" />
			</a-form-item>
			<a-form-item label="总用量" name="totalUseNum">
				<a-input v-model:value="state.formState.totalUseNum" disabled />
			</a-form-item>
			<a-form-item label="金额" name="amount">
				<a-input v-model:value="state.formState.amount" />
			</a-form-item>
			<a-form-item label="是否到货" name="flag">
				<a-radio-group v-model:value="state.formState.flag">
					<a-radio value="1">是</a-radio>
					<a-radio value="2">否</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="供应商" name="vendor">
				<a-select
					v-model:value="state.formState.vendor"
					@change="handleProdcutCode"
				>
					<a-select-option
						:key="i.id"
						v-for="i in vendorList"
						:value="i.companyName"
						>{{ i.companyName }}</a-select-option
					>
				</a-select>
			</a-form-item>
			<!-- <a-form-item label="仓库名称" name="warehouseName">
				<a-input v-model:value="state.formState.warehouseName" />
			</a-form-item> -->
			<a-form-item label="是否已付款" name="payFlag">
				<a-input v-model:value="state.formState.payFlag" />
			</a-form-item>
			<a-form-item label="备注" name="remark">
				<a-textarea v-model:value="state.formState.remark" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
